<template>
  <div>
    <el-form ref="ruleFormRef" style="max-width: 400px;" :model="ruleForm" :rules="rules" label-width="100px"
      class="demo-ruleForm" status-icon>
      <el-form-item label="客户名称:" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入客户名称" />
      </el-form-item>
      <el-form-item label="客户等级:">
        <el-input v-model="ruleForm.level" placeholder="请输入客户等级">
        </el-input>
      </el-form-item>

    </el-form>
    <div class="detail">
      <div class="detail-title">
        <el-button type="primary" size="small" @click="addRow">增行</el-button>
        <el-button type="primary" size="small" @click="delRow">删行</el-button>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%" stripe border @cell-click="cellck" ref="purchaseRef">
          <el-table-column type="selection" width="80" header-algin="center" align="center" />
          <el-table-column prop="name" label="联系人" width="180" header-algin="center" align="center">
            <template v-slot="{ row, column }">
              <span v-if="row.show[column.property] == undefined">{{ row.name }}</span>
              <el-input v-else v-model="row.name" placeholder="点击输入联系人"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机" width="180" header-algin="center" align="center">
            <template v-slot="{ row, column }">
              <span v-if="row.show[column.property] == undefined">{{ row.mobile }}</span>
              <el-input v-else v-model="row.mobile" placeholder="点击输入手机号"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="160" header-algin="center" align="center">
            <template v-slot="{ row, column }">
              <span v-if="row.show[column.property] == undefined">{{ row.email }}</span>
              <el-input v-else v-model="row.email" placeholder="点击输入邮箱"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="qq" label="qq" width="160" header-algin="center" align="center">
            <template v-slot="{ row, column }">
              <span v-if="row.show[column.property] == undefined">{{ row.qq }}</span>
              <el-input v-else v-model="row.qq" placeholder="点击输入qq"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="address" width="200" label="地址" header-algin="center" align="center">
            <template v-slot="{ row, column }">
              <span v-if="row.show[column.property] == undefined">{{ row.address }}</span>
              <el-input v-else v-model="row.address" placeholder="点击输入地址"></el-input>
            </template>
          </el-table-column>

          <el-table-column prop="isMain" width="200" label="首要联系人" header-algin="center" align="center">
            <template v-slot="{ row, column }">
              <span v-if="row.show[column.property] == undefined">{{ row.isMain }}</span>
              <el-select v-else v-model="row.isMain" placeholder="请选择是否是首要联系人">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label" />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
        <el-input v-model="ruleForm.note" style="width: 100%;margin-top: 10px;" :rows="6" type="textarea"
          placeholder="添加备注信息" />
      </div>
      <div class="btn">
        <el-button type="primary" @click="save">提交</el-button>
      </div>
    </div>


  </div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import { saveClient } from "@/api/client/client.js"
import { ElMessage } from "element-plus";
import { useRouter } from 'vue-router'
//新增路由跳转
const router = useRouter();
const tableData = ref([]);
const purchaseRef = ref(null); //表格引用
const lastRow = ref({}); //记录上一次双击的是哪一行
let options = [{
  value: "0",
  label: "不是"
}, {
  value: "1",
  label: "是"
},
];
const ruleForm = ref({
  name: "",
  level: "",
  note: ""
});
//单元格双击事件
function cellck(row, column) {
  //先清空之前 添加的所有属性
  if (lastRow.value.show != undefined) {
    //清空标志属性
    lastRow.value.show = {};
  }

  let tmp = column.property;
  row.show[tmp] = true;

  //记录双击的行
  lastRow.value = row;
}
//表格初始化10行
function init() {
  for (let i = 1; i <= 5; i++) {
    addRow();
  }
}
//新增行
function addRow() {
  tableData.value.push({
    name: "",
    mobile: "",
    email: "",
    qq: "",
    address: "",
    isMain: "",
    show: {}
  });
}

//删除行
function delRow() {
  let rows = purchaseRef.value.getSelectionRows();
  if (rows.length == 0) {
    ElMessage({
      message: "请选择要删除的行！",
      type: "warning"
    });
  }

  //遍历要删除的行
  rows.forEach(r => {
    removeData(r);
  });
}

//从tableData移除 行  r 代表要移除的行
function removeData(r) {
  for (let i = 0, len = tableData.value.length; i < len; i++) {
    //获取当前行对象
    let tmp = tableData.value[i];
    //判断tmp是否是要删除的对象r
    if (tmp == r) {
      console.log("删除", tmp);
      tableData.value.splice(i, 1);
      break; //终止循环
    }
  }
}

//保存
async function save() {

  let detail = [];//保存用户填写的联系人
  //遍历表格数据
  tableData.value.forEach(r => {
    //判断当前对象中是否选择了联系人 如果是  加入到
    if (r.name != undefined && r.name != "") {
      if (r.isMain == '是') {
        r.isMain = 1
      } else {
        r.isMain = 0
      }
      detail.push(r);
    }
  })
  //判断联系人中是否有首要联系人 如果没有  默认第一个为首要联系人
  let all=true;
 for (let i = 0; i < detail.length; i++) {
    if (detail[i].isMain !== 0) {
       all=false;
       break;
      }
    }
    if(all&&detail.length>0){
      detail[0].isMain=1;
    }
  if (detail.length == 0) {
    ElMessage({
      message: "联系人不能为空！",
      type: "warning"
    });
    return;
  }
  // 参数值
  let data = ruleForm.value;//客户基本信息
  //将联系人加入表
  data.clientContactList = detail;



  //保存
  let res = await saveClient(data);
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    router.push({ path: '/client/query' })
  }
}
onMounted(() => {
  init();
})
</script>
<style>
.detail {
  margin-right: 20px;
  margin-top: 30px;
  padding-left: 10px;
}

.detail-title {
  height: 40px;
  line-height: 40px;
  border: #ebeef5 solid 1px;
  border-bottom-style: none;
  padding-left: 10px;
}

.btn {
  margin-top: 20px;
  text-align: center;
}
</style>
